/**
 * 组件代码
 */
Vue.component('comSougnBar', {
    name: 'comSougnBar',
    props: ['config', 'data'],
    data: function () {
        return {
            myChart: {},
            option: {
                color:[],
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
        }
    },
    mounted: function () {
        var that = this;
        this.myChart = echarts.init(this.$el);
        // 指定图表的配置项和数据
        this.myChart.setOption(this.getData());
        this.myChart.on('click', function (params) {
            // 在用户点击后控制台打印数据的名称
            var data = [];
            data.push(params.name);
            data.push(params.seriesName);
            data.push(params.value);
            if (that.myConfig.output.trim() == "") {
                return;
            } else {
                setValue(that.myConfig.output, data);
            }
        });
        var that = this;
        setTimeout(function () {
            that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
        }, 100)
    },
    methods: {
        getData() {
            var options = Object.assign({}, this.option);
            var title = window.getValue(this.myConfig.title);
            var x = window.getValue(this.myConfig.x).reduce(function (a, b) {
                return a.concat(b)
            });
            var y = window.getValue(this.myConfig.y).reduce(function (a, b) {
                return a.concat(b)
            });
            var data = {
                color: [this.myConfig.dataColor],
                title: {
                    text: title
                },
                xAxis: {
                    data: x,
                    axisLine: {
                        lineStyle: {
                            color: this.myConfig.XColor,
                        }
                    }
                },
                yAxis: {
                    axisLabel: {
                        shadowColor: this.myConfig.YColor,
                        color: this.myConfig.YColor
                    }
                },
                series: [{
                    type: 'bar',
                    data: y,
                }]
            }
            Object.assign(options, data)
            return options;
        }
    },
    computed: {
        myConfig: function () {
            var data = {};
            for (var item of this.config) {
                data[item.id] = item.value;
            }
            return data;
        },
    },
    watch: {
        data: function (oldValue, newValue) {
            var that = this;
            this.myChart.setOption(this.getData());
            setTimeout(function () {
                that.myChart.resize() // 当元素尺寸发生改变是会触发此事件，刷新图表
            }, 100)
        }
    },
    template: `<div :style="myConfig" style="width: 100%;height: 100%;"></div>`,
});
/**
 * 配置项
 * @type {{name: string, id: string, type: string, value: string}[]}
 */
var comSougnBarConfig = [{
    name: "标题",
    type: "data",
    value: "",
    id: "title"
}, {
    name: "X轴",
    type: "data",
    value: "",
    id: "x"
}, {
    name: "Y轴",
    type: "data",
    value: "",
    id: "y"
}, {
    name: "X轴颜色",
    type: "color",
    value: "",
    id: "XColor"
}, {
    name: "Y轴颜色",
    type: "color",
    value: "",
    id: "YColor"
},{
    name: "数据颜色",
    type: "color",
    value: "",
    id: "dataColor"
}, {
    name: "点击输出",
    type: "data",
    value: "",
    id: "output"
}]
